<%--
  Created by IntelliJ IDEA.
  User: jiang
  Date: 2021/7/22
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <link href="${pageContext.request.contextPath}/resources/component/pear/css/pear.css" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">角色名字</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">角色的标识</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tag" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="role-table" lay-filter="role-table"></table>
    </div>
</div>

<script type="text/html" id="role-toolbar">
    <shiro:hasPermission name="role:add">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    </shiro:hasPermission>
    <shiro:hasPermission name="role:delete">
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </shiro:hasPermission>
</script>

<script type="text/html" id="role-bar">
    <shiro:hasPermission name="role:update">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
                class="layui-icon layui-icon-edit"></i>
        </button>
    </shiro:hasPermission>
    <shiro:hasRole name="admin">
        <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i
                class="layui-icon layui-icon-auz"></i></button>
    </shiro:hasRole>
    <shiro:hasPermission name="role:delete">
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
                class="layui-icon layui-icon-delete"></i>
        </button>
    </shiro:hasPermission>
</script>

<script type="text/html" id="role-form-add" lay-filter="role-form-add">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="addRoleFrm">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入角色的名称" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="tag" lay-verify="required" autocomplete="off"
                               placeholder="请输入角色的标识" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="descp" autocomplete="off"
                               placeholder="请输入角色的描述" class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-add">
                            <i class="layui-icon">&#xe605;</i>
                            确认
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            取消
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="role-form-update" lay-filter="role-form-update">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="updateRoleFrm">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input name="id" type="hidden">
                        <input type="text" name="name" placeholder="请输入角色的名称" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="tag" lay-verify="required" autocomplete="off"
                               placeholder="请输入角色的标识" class="layui-input" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="descp" autocomplete="off"
                               placeholder="请输入角色的描述" class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-update">
                            <i class="layui-icon">&#xe605;</i>
                            确认
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            取消
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="role-form-assign">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="assignRoleFrm" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择权限</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id">
                        <ul id="permsTree" class="dtree" data-id="0"></ul>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: right">
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-assign">
                            <i class="layui-icon">&#xe605;</i>
                            确认
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md" lay-filter="close" lay-submit="">
                            <i class="layui-icon layui-icon-close"></i>
                            关闭
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script src="${pageContext.request.contextPath}/resources/component/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/resources/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;

        let MODULE_PATH = "operate/";

        let cols = [
            [
                {type: 'checkbox'},
                {title: '角色名', field: 'name', align: 'center', width: 100},
                {title: '角色code', field: 'tag', align: 'center'},
                {title: '描述', field: 'descp', align: 'center'},
                {title: '操作', toolbar: '#role-bar', align: 'center', width: 195}
            ]
        ]

        table.render({
            elem: '#role-table',
            url: '${pageContext.request.contextPath}/role/findByPage.do',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#role-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "count": res.data.total,
                    "data": res.data.list
                }
            },
            response: {
                statusName: 'code',
                statusCode: 200,
                dataName: 'data'
            }
        });

        table.on('tool(role-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event === 'power') {
                window.power(obj);
            }
        });

        table.on('toolbar(role-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(role-query)', function (data) {
            table.reload('role-table', {where: data.field})
            return false;
        });

        let mainIndex;
        window.add = function () {
            mainIndex = layer.open({
                type: 1,
                title: '新增角色',
                shade: 0.1,
                area: ['500px', '400px'],
                content:$('#role-form-add').html()
            });
        }

        window.power = function (obj) {
            mainIndex = layer.open({
                type: 1,
                title: '角色授权',
                shade: 0.1,
                area: ['500px', '650px'],
                content: $('#role-form-assign').html(),
                success: function (layero, index) {
                    form.val('assignRoleFrm', obj.data)
                    // 加载dtree的树形组件
                    dtree.render({
                        elem: "#permsTree",
                        url: "${pageContext.request.contextPath}/permission/loadPermsTree.do?roleId=" + obj.data.id,
                        checkbar: true,
                        checkbarType: "self",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        response: {statusCode: 200},  //修改response中返回数据的定义
                        selectInputName: {
                            nodeId: "parentId"
                        }
                    });
                }
            });
        }

        window.edit = function (obj) {
            mainIndex = layer.open({
                type: 1,
                title: '修改角色数据',
                shade: 0.1,
                area: ['500px', '400px'],
                content: $('#role-form-update').html(),
                success:function (layero, index){
                    form.val('updateRoleFrm', obj.data);
                }
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该角色', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url:"${pageContext.request.contextPath}/car/delete.do?id=" + obj.data.id,
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些用户', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "${pageContext.request.contextPath}/role/delete.do?id=" + ids,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                table.reload('role-table');
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

        window.refresh = function () {
            table.reload('role-table');
        }

        form.on('submit(role-add)', function(obj){
            $.post('${pageContext.request.contextPath}/role/add.do', obj.field, function(res){
                if (res.code == 200) {
                    // 新增成功
                    layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                        layer.close(mainIndex);//关闭当前页
                        table.reload("role-table");
                    });
                    return;
                }
                layer.msg(res.msg, {icon: 2});
            });
            return false;
        });

        form.on('submit(role-update)', function(obj){
            $.post('${pageContext.request.contextPath}/role/update.do', obj.field, function(res){
                if (res.code == 200) {
                    // 新增成功
                    layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                        layer.close(mainIndex);//关闭当前页
                        table.reload("role-table");
                    });
                    return;
                }
                layer.msg(res.msg, {icon: 2});
            });
            return false;
        });

        form.on('submit(role-assign)', function (obj) {
            let params = dtree.getCheckbarNodesParam("permsTree");
            let permIds = "";
            $.each(params, function (index, item) {
                permIds += item.nodeId + ",";
            })
            permIds = permIds.substr(0, permIds.length - 1);

            let data = {
                roleId: obj.field.id,
                permIds: permIds
            };

            $.post("${pageContext.request.contextPath}/role/assign.do", data, function (result) {
                if (result.code == 200) {
                    // 新增成功
                    layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                        layer.close(mainIndex);//关闭当前页
                        table.reload("user-table");
                    });
                    return;
                }
                layer.msg(result.msg, {icon: 2});
            })
            return false;
        });

        form.on('submit(close)', function (obj) {
            layer.close(mainIndex);
            return false;
        });
    })
</script>
</body>
</html>
